<template>
  <div class="body">
    <van-icon id="backBtn" name="arrow-left" @click="backToList" />
    <!-- 视频主体 -->
    <div id="main">
      <!-- 播放按钮 -->
      <van-icon
        id="play"
        name="play"
        class="playBtn"
        color="#e6e6e6"
        size="60px"
        style="display: none"
      ></van-icon>
      <!-- 视频控件 -->
      <video
        id="videoDom"
        :src="videoSrc"
        :poster="cover"
        :controls="false"
        loop
        class="video"
        autoplay
        muted
        preload="auto" 
        data-status="play"
        @click="VideoPlay"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        webkit-playsinline="true"
        playsinline="true"
      ></video>
      <!-- 进度条 -->
      <van-progress
        :percentage="progress"
        stroke-width="3"
        class="progress"
        pivot-text=""
      />
      <!-- 全屏按钮 -->
      <van-icon
        :name="fullScreenIcon"
        class="FullScreenBtn"
        color="gray"
        size="22px"
        @click="FullScreen"
      ></van-icon>
    </div>
    <!-- 底部区域 -->
    <div id="bottom">
      <!-- 用户信息 -->
      <div id="userInfo">
        <van-image
          width="1rem"
          height="1rem"
          round
          fit="cover"
          class="userAvatar"
          :src="avatarSrc"
        />
        <span class="userName">{{ username }}</span>
      </div>
      <!-- 视频描述 -->
      <div id="desc">
        {{ desc }}
      </div>
      <!-- 底部tabbar -->
      <Tabbar :video_id="id" class="tabbar" @openComment="openComment" @closeComment="closeComment"></Tabbar>
    </div>
  </div>
</template>
<script>
import { Image as VanImage, Icon, Field, Progress, Toast } from "vant";
import { getVideoDetail } from "@/api/FindModuleAPI/findList.js";
//二次封装Tabbar组件
import Tabbar from "@/components/FindModuleComponents/FindTabbar.vue";
export default {
  data() {
    return {
      //当前视频id用于获取视频资源
      id: "",
      //视频所属用户名
      username: "",
      //视频所属用户头像
      avatarSrc: "",
      //未加载时视频封面
      cover: "",
      //视频地址
      videoSrc: "",
      //视频标题
      desc: "",
      //视频DOM
      video: null,
      //播放DOM
      play: null,
      //进度条数据
      progress: 0,
      //全屏按钮
      fullScreenIcon: "expand",
    };
  },
  components: {
    [VanImage.name]: VanImage,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Progress.name]: Progress,
    [Toast.name]: Toast,
    Tabbar,
  },
  methods: {
    //视频播放与暂停
    VideoPlay() {
      let status = this.video.dataset["status"];
      switch (status) {
        //当前为播放状态
        case "play": {
          this.video.pause();
          this.video.dataset["status"] = "pause";
          this.play.style.display = "block";
          break;
        }
        //当前为暂停状态
        case "pause": {
          this.video.play();
          this.video.dataset["status"] = "play";
          this.play.style.display = "none";
          break;
        }
      }
    },
    //进入全屏
    FullScreen() {
      if (this.video.requestFullscreen) {
        this.video.requestFullscreen();
      } else if (this.video.mozRequestFullScreen) {
        this.video.mozRequestFullScreen();
      } else if (this.video.webkitRequestFullScreen) {
        this.video.webkitRequestFullScreen();
      }
    },
    //退出全屏
    exitFullscreen() {
      if (this.video.exitFullscreen) {
        this.video.exitFullscreen();
      } else if (this.video.mozCancelFullScreen) {
        this.video.mozCancelFullScreen();
      } else if (this.video.webkitCancelFullScreen) {
        this.video.webkitCancelFullScreen();
      }
    },
    //返回列表
    backToList() {
      //history.back();
      this.$router.back()
      
    },
    openComment(){   
        this.video.style.display = 'none'
    },
    closeComment(){      
      setTimeout(()=>{
        this.video.style.display = 'block'
      })        
    }
  },
  async created() {
    //通过router获取到来自列表页的数据
    let params = this.$route.params;
    this.id = params.id;
    this.username = params.username;
    this.desc = params.desc;
    this.cover = params.cover;
    this.avatarSrc = params.avatarSrc;
    //获取视频详情信息
    let res = await getVideoDetail({ id: this.id, username: this.username });
    this.videoSrc = res.detail[0].content;
  },
  mounted() {
    this.video = this.$el.querySelector("#videoDom");
    let that = this;
    //进度条开启
    this.video.addEventListener(
      "timeupdate",
      function () {
        let nowtime = (that.video.currentTime / that.video.duration) * 100;
        that.progress = Math.ceil(nowtime);
      },
      false
    );
    //获取暂停按钮Dom
    this.play = this.$el.querySelector("#play");
  },
  beforeDestroy() {
    this.video = null;
    this.play = null;
  },
};
</script>
<style lang="less" scoped>
.body {
  width: 100vw;
  height: 100vh;
  background-color: black;
}
#bottom {
  color: white;
  width: 100vw;
  height: 150px;
  position: absolute;
  bottom: 0;
  //margin-left: 10px;
  padding-top: 10px;
  text-align: left;
  .tabbar {
    z-index: 9;
  }
  #userInfo {
    background-color: transparent;
    width: 200px;
    margin-bottom: 1px;
    padding-left: 5px;
    .userAvatar {
      vertical-align: middle;
    }
    .userName {
      font-size: 16px;
      padding: 3px;
      letter-spacing: 1px;
    }
  }
  #desc {
    font-size: 16px;
    padding: 5px;
    padding-right: 40px;
    padding-bottom: 3%;
    margin-bottom: 5%;
    letter-spacing: 2px;
    text-align: left;
  }
}
#main {
  position: relative;
  height: 100%;
  width: 100%;
  .video {
    height: 92%;
    width: 100%;
    object-fit: fill;
  }
  .playBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .progress {
    z-index: 5;
    margin-top: -5px;
  }
  .FullScreenBtn {
    position: absolute;
    z-index: 2;
    margin-top: -5px;
  }
  .FullScreenBtn {
    position: absolute;
    right: 8px;
    bottom: 62px;
  }
}
#backBtn {
  position: absolute;
  z-index: 2;
  left: 10px;
  color: white;
  font-weight: bold;
  top: 10px;
}
</style>